<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
                        <div class="title">
                            <span class="title-text">{{ title }}</span>
                            <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColors" />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">

                    <!-- <router-view></router-view> -->

                    <!-- 第三行数据 -->
                    <div class="content-box">
                        <!-- 左边 -->
                        <div style="width: 400px; height: 900px;margin-left: 30px; margin-top: 20px;">
                            <!-- 左边1 -->
                            <div>
                                <dv-border-box-13 style="width: 400px;height: 300px;">

                                    <div class="processing-container">
                                        <!-- 标题区域 -->
                                        <div class="processing-header">
                                            <div class="diamond-icon"></div>
                                            <h3 class="processing-title">正在受理</h3>
                                        </div>

                                        <!-- 统计数据区域 -->
                                        <div class="stats-section">
                                            <div class="stat-item">
                                                <span class="stat-label">正在受理</span>
                                                <span class="stat-value green-text">17</span>
                                                <span class="stat-unit">人次</span>
                                            </div>
                                            <div class="stat-item">
                                                <span class="stat-label">前方等待</span>
                                                <span class="stat-value orange-text">31</span>
                                                <span class="stat-unit">人次</span>
                                            </div>
                                        </div>

                                        <!-- 人员图标区域 -->
                                        <div class="people-icons">
                                            <!-- 绿色图标 - 正在受理 -->
                                            <div class="person-icon green-icon" v-for="i in 17" :key="'green-' + i">
                                            </div>

                                            <!-- 橙色图标 - 等待 -->
                                            <div class="person-icon orange-icon" v-for="i in 31" :key="'orange-' + i">
                                            </div>
                                        </div>

                                        <!-- 比例条 -->
                                        <div class="ratio-bar">
                                            <div class="ratio-fill" :style="{ width: '33%' }"></div>
                                            <div class="ratio-text">33% / 67%</div>
                                        </div>
                                    </div>
                                </dv-border-box-13>
                            </div>

                            <!-- 左边2 -->
                            <div style="margin-top: 10px;">
                                <dv-border-box-13 style="width: 400px;height: 590px;">
                                    <div class="realtime-handling-container">
                                        <!-- 标题区域 -->
                                        <div class="handling-header">
                                            <div class="diamond-mark"></div>
                                            <h3 class="handling-title">实时受理</h3>
                                        </div>

                                        <!-- 数据列表 -->
                                        <div class="data-list">
                                            <div class="data-item" v-for="(item, index) in dataList" :key="index">
                                                <!-- 左侧图标 -->
                                                <div class="item-icon" :class="item.iconClass"></div>

                                                <!-- 中间文字 -->
                                                <div class="item-label">{{ item.label }}</div>

                                                <!-- 右侧数据 -->
                                                <div class="item-value">
                                                    <span :class="{ negative: item.value < 0 }">{{ item.value }}</span>
                                                    <span class="item-unit">{{ item.unit }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-13>
                            </div>

                        </div>

                        <!-- 中间 -->
                        <div style="width: 960px; height: 900px;margin-left: 30px;margin-top: 20px;">
                            <!-- 中间1 -->
                            <div>
                                <dv-border-box-13 style="width: 960px;height: 590px;">
                                    <div class="workload-top-container">
                                        <!-- 标题区域 -->
                                        <div class="top-header">
                                            <div class="diamond-tag"></div>
                                            <h3 class="main-title">办件量 TOP5</h3>

                                            <!-- 累计办件总量 -->
                                            <div class="total-count-section">
                                                <span class="total-label">累计办件总量：</span>
                                                <div class="total-number-group">
                                                    <div class="total-number-card" v-for="(num, index) in totalNumber"
                                                        :key="index">
                                                        {{ num }}
                                                    </div>
                                                    <!-- <div class="total-separator" v-for="(sep, index) in separators" :key="'sep-' + index">,</div> -->
                                                </div>
                                                <span class="total-unit">件</span>
                                            </div>
                                        </div>

                                        <!-- 当日办件排行 -->
                                        <div class="ranking-section">
                                            <div class="section-title">
                                                <div class="title-dot"></div>
                                                <span>当日办件事项排行</span>
                                            </div>

                                            <div class="table-container">
                                                <table class="ranking-table">
                                                    <thead>
                                                        <tr class="table-header">
                                                            <th>排名</th>
                                                            <th>办理事项</th>
                                                            <th>所属部门</th>
                                                            <th>办件量</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr class="table-row" v-for="(item, index) in dailyRank"
                                                            :key="index">
                                                            <td>{{ index + 1 }}</td>
                                                            <td>{{ item.matter }}</td>
                                                            <td>{{ item.department }}</td>
                                                            <td>{{ item.count }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                        <!-- 当月办件排行 -->
                                        <div class="ranking-section">
                                            <div class="section-title">
                                                <div class="title-dot"></div>
                                                <span>当月办件事项排行</span>
                                            </div>

                                            <div class="table-container">
                                                <table class="ranking-table">
                                                    <thead>
                                                        <tr class="table-header">
                                                            <th>排名</th>
                                                            <th>办理事项</th>
                                                            <th>所属部门</th>
                                                            <th>办件量</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr class="table-row" v-for="(item, index) in monthlyRank"
                                                            :key="index">
                                                            <td>{{ index + 1 }}</td>
                                                            <td>{{ item.matter }}</td>
                                                            <td>{{ item.department }}</td>
                                                            <td>{{ item.count }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-13>
                            </div>

                            <!-- 中间2 -->
                            <div>
                                <dv-border-box-13 style="width: 960px;height: 300px;margin-top: 10px;">
                                    <div class="trend-container">
                                        <!-- 标题区域 -->
                                        <div class="trend-header">
                                            <div class="diamond-marker"></div>
                                            <h3 class="trend-title">近15日办件趋势</h3>
                                        </div>

                                        <!-- 图表容器 -->
                                        <div class="chart-container" id="aaa" style="width: 906px;height: 280px;"></div>
                                    </div>
                                </dv-border-box-13>
                            </div>

                        </div>

                        <!-- 右边 -->
                        <div style="width: 400px; height: 900px;margin-left: 30px; margin-top: 20px;">
                            <!-- 右边1 -->
                            <div>
                                <dv-border-box-13 style="width: 400px;height: 190px;">
                                    <div class="monthly-total-container">
                                        <!-- 标题区域 -->
                                        <div class="monthly-header">
                                            <div class="diamond-sign"></div>
                                            <h3 class="monthly-title">月度办件总量</h3>
                                        </div>

                                        <!-- 大数字展示区 -->
                                        <div class="big-number-section">
                                            <!-- 数字卡片 -->
                                            <div class="number-card" v-for="num in bigNumber" :key="num">
                                                {{ num }}
                                            </div>

                                            <!-- 逗号分隔符 -->
                                            <div class="comma">,</div>

                                            <!-- 后续数字卡片 -->
                                            <div class="number-card" v-for="num in secondNumber" :key="'s-' + num">
                                                {{ num }}
                                            </div>

                                            <!-- 件单位 -->
                                            <div class="unit-text">件</div>
                                        </div>

                                        <!-- 明细数据区 -->
                                        <div class="detail-data">
                                            <div class="detail-item" v-for="(item, index) in detailList" :key="index">
                                                <div class="detail-value">{{ item.value }}</div>
                                                <div class="detail-label">{{ item.label }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-13>
                            </div>

                            <!-- 右边2 -->
                            <div>
                                <dv-border-box-13 style="width: 400px;height: 190px;margin-top: 10px;">
                                    <div class="annual-total-container">
                                        <!-- 标题区域 -->
                                        <div class="annual-header">
                                            <div class="diamond-indicator"></div>
                                            <h3 class="annual-title">年度累计办件总量</h3>
                                        </div>

                                        <!-- 大数字展示区 -->
                                        <div class="large-number-area">
                                            <!-- 数字卡片和分隔符组合 -->
                                            <div class="number-card">1</div>
                                            <div class="separator">,</div>
                                            <div class="number-card">2</div>
                                            <div class="number-card">3</div>
                                            <div class="number-card">4</div>
                                            <div class="separator">,</div>
                                            <div class="number-card">5</div>
                                            <div class="number-card">6</div>
                                            <div class="number-card">2</div>

                                            <!-- 单位 -->
                                            <div class="count-unit">件</div>
                                        </div>

                                        <!-- 明细数据区 -->
                                        <div class="stat-details">
                                            <div class="stat-item1" v-for="(item, index) in statData" :key="index">
                                                <div class="stat-figure">{{ item.number }}</div>
                                                <div class="stat-label">{{ item.name }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-13>
                            </div>

                            <!-- 右边3 -->
                            <div>
                                <dv-border-box-13 style="width: 400px;height: 500px;margin-top: 10px;">
                                    <div class="satisfaction-total-container">
                                        <!-- 标题区域 -->
                                        <div class="satisfaction-header">
                                            <div class="diamond-sign"></div>
                                            <h3 class="satisfaction-title">累计办事满意度</h3>
                                        </div>

                                        <!-- 仪表盘容器 -->
                                        <div class="gauge-container">
                                            <div class="chart-wrapper" id="bbb" style="width: 100%; height: 250px;"></div>
                                        </div>

                                        <!-- 满意度分布列表 -->
                                        <div class="satisfaction-list">
                                            <div class="satisfaction-item" v-for="(item, index) in satisfactionData"
                                                :key="index">
                                                <div class="item-color" :style="{ backgroundColor: item.color }"></div>
                                                <div class="item-name">{{ item.name }}</div>
                                                <div class="item-bar">
                                                    <div class="bar-fill" :style="{
                                                        width: item.percentage,
                                                        backgroundColor: item.color
                                                    }"></div>
                                                </div>
                                                <div class="item-percentage">{{ item.percentage }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-13>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';

/**
 * 数据可视化页面 - 仪表盘展示
 * 主要功能：展示办事数据统计、满意度分析等可视化信息
 */
export default defineComponent({
    components: {}, // 删除未使用的组件
    setup() {
        // 左边2的数据
        // 实时受理数据
        const dataList = ref([
            { label: '今日取号', value: 321, unit: '人次', iconClass: 'ticket-icon' },
            { label: '今日受理', value: 522, unit: '人次', iconClass: 'accept-icon' },
            { label: '正在受理', value: 562, unit: '人次', iconClass: 'processing-icon' },
            { label: '前方等待', value: -113, unit: '人次', iconClass: 'wait-icon' },
            { label: '新注册企业', value: 473, unit: '家', iconClass: 'company-icon' },
            { label: '证照联办', value: 331, unit: '件', iconClass: 'license-icon' },
            { label: '医保社保', value: 1433, unit: '人次', iconClass: 'insurance-icon' },
            { label: '交管违章处理', value: 908, unit: '件', iconClass: 'traffic-icon' },
            { label: '不动产交易', value: 522, unit: '件', iconClass: 'property-icon' },
            { label: '市民卡', value: 463, unit: '件', iconClass: 'card-icon' }
        ]);

        // 中间1
        // 累计办件总量数字（拆分展示）
        const totalNumber = ref(['1', '2', '3', '4', '5', '6', '7', '8', '8', '1']);
        const separators = ref([1, 2]); // 控制逗号位置
        // 当日办件排行数据
        const dailyRank = ref([
            { matter: '这里是办理的事项名称...', department: '社保局', count: 122 },
            { matter: '这里是办理的事项名称...', department: '人社局', count: 112 },
            { matter: '这里是办理的事项名称...', department: '药监局', count: 98 },
            { matter: '这里是办理的事项名称...', department: '交通局', count: 88 },
            { matter: '这里是办理的事项名称...', department: '教育局', count: 87 }
        ]);

        // 当月办件排行数据
        const monthlyRank = ref([
            { matter: '这里是办理的事项名称...', department: '社保局', count: 2122 },
            { matter: '这里是办理的事项名称...', department: '人社局', count: 2112 },
            { matter: '这里是办理的事项名称...', department: '药监局', count: 298 },
            { matter: '这里是办理的事项名称...', department: '交通局', count: 288 },
            { matter: '这里是办理的事项名称...', department: '教育局', count: 287 }
        ]);

        // 右边1
        // 大数字拆分展示
        const bigNumber = ref(['1', '2', '3']);
        const secondNumber = ref(['3', '8']);

        // 明细数据
        const detailList = ref([
            { value: '12345', label: '本月取号总量' },
            { value: '2345', label: '本月办件总量' },
            { value: '2234', label: '本月满意总量' }
        ]);

        // 右边2
        // 统计明细数据
        const statData = ref([
            { number: '1234820', name: '累计取号总量' },
            { number: '234834', name: '累计办件总量' },
            { number: '234320', name: '累计满意总量' }
        ]);

        //右边3的数据
        // 图表容器引用
        const gaugeChartRef = ref(null);

        // 满意度数据
        const satisfactionData = [
            { name: '非常满意', percentage: '25%', color: '#38c172' },
            { name: '满意', percentage: '45%', color: '#a0d995' },
            { name: '基本满意', percentage: '15%', color: '#3182ce' },
            { name: '不满意', percentage: '10%', color: '#ed8936' },
            { name: '非常不满意', percentage: '5%', color: '#e53e3e' } // 原数据总和超100%，这里调整为5%使总和为100%
        ];


        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 颜色
        const decorationColors = ['#568aea', '#000000']
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })

        const router = useRouter()
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }


        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
        // 生命周期
        onMounted(() => {
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()

            // 中间2的图形
            setTimeout(() => {
                // 中间2的图形
                var chartDom = document.getElementById('aaa');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    textStyle: {
                        color: '#ffffff' // 设置所有文本为白色
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', "9", '10', '11', '12', '13', '14', '15'],
                        axisLabel: {
                            color: '#ffffff' // X轴标签颜色
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff' // X轴线颜色
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            color: '#ffffff' // Y轴标签颜色
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff' // Y轴线颜色
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.2)' // 网格线颜色
                            }
                        }
                    },
                    series: [
                        {
                            data: [150, 230, 224, 218, 135, 147, 260, 250, 240, 20, 220, 110, 55, 180, 290],
                            type: 'line',
                            lineStyle: {
                                color: '#8B5FBA', // 线条颜色改为紫色
                                width: 3
                            },
                            itemStyle: {
                                color: '#8B5FBA' // 数据点颜色
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);

            }, 500);

            // 右边3的图形
            setTimeout(() => {
                // 右边3的图形
                var chartDom = document.getElementById('bbb');
                var myChart = echarts.init(chartDom);
                
                // 仪表盘配置
                const option = {
                    backgroundColor: 'transparent',
                    series: [
                        {
                            type: 'gauge',
                            radius: '85%',
                            startAngle: 225,
                            endAngle: -45,
                            min: 0,
                            max: 100,
                            splitNumber: 5,
                            axisLine: {
                                lineStyle: {
                                    width: 18,
                                    color: [
                                        [0.2, '#e53e3e'],    // 0-20 红色
                                        [0.4, '#ed8936'],    // 20-40 橙色
                                        [0.6, '#3182ce'],    // 40-60 蓝色
                                        [0.8, '#a0d995'],    // 60-80 浅绿色
                                        [1, '#38c172']      // 80-100 绿色
                                    ]
                                }
                            },
                            axisTick: {
                                distance: -12,
                                length: 6,
                                splitNumber: 5,
                                lineStyle: {
                                    color: '#fff',
                                    width: 1
                                }
                            },
                            axisLabel: {
                                distance: -15,
                                color: '#fff',
                                fontSize: 10,
                                formatter: function(value) {
                                    if (value === 0) return '0';
                                    if (value === 20) return '20';
                                    if (value === 40) return '40';
                                    if (value === 60) return '60';
                                    if (value === 80) return '80';
                                    if (value === 100) return '100';
                                    return '';
                                }
                            },
                            splitLine: {
                                distance: -10,
                                length: 12,
                                lineStyle: {
                                    color: '#fff',
                                    width: 2
                                }
                            },
                            pointer: {
                                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                                length: '75%',
                                width: 8,
                                offsetCenter: [0, '10%'],
                                itemStyle: {
                                    color: '#fff'
                                }
                            },
                            title: {
                                show: true,
                                offsetCenter: [0, '25%'],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12,
                                    fontWeight: 'normal'
                                }
                            },
                            detail: {
                                valueAnimation: true,
                                formatter: '{value}%',
                                color: '#fff',
                                fontSize: 32,
                                fontWeight: 'bold',
                                offsetCenter: [0, '5%']
                            },
                            data: [
                                {
                                    value: 97.82
                                }
                            ]
                        }
                    ]
                };
                
                option && myChart.setOption(option);

            }, 500);

        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11,
            dataList,
            bigNumber,
            secondNumber,
            detailList,
            statData,
            totalNumber, separators, dailyRank, monthlyRank,satisfactionData

        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

/* 左边1样式 */
/* 主容器 */
.processing-container {
    width: 100%;
    max-width: 600px;
    //   background-color: #0a1e4c;
    padding: 25px 15px;
    box-sizing: border-box;
    border-radius: 4px;
}

/* 标题区域 */
.processing-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(60, 180, 255, 0.2);
}

.diamond-icon {
    width: 12px;
    height: 12px;
    background-color: #3cb4ff;
    transform: rotate(45deg);
    margin-right: 8px;
}

.processing-title {
    color: #3cb4ff;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

/* 统计数据区域 */
.stats-section {
    display: flex;
    gap: 30px;
    margin-bottom: 15px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
}

.green-text {
    color: #48bb78;
}

.orange-text {
    color: #ed8936;
}

.stat-unit {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* 人员图标区域 */
.people-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 40px;
    max-height: 100px;
    //   overflow: hidden;
}

/* 人员图标样式 */
.person-icon {
    width: 24px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 绿色人员图标（正在受理） */
.green-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='%2348bb78' d='M12 4c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm-6 8c0-2.2 1.8-4 4-4h4c2.2 0 4 1.8 4 4v8h2v-8c0-3.3-2.7-6-6-6h-4c-3.3 0-6 2.7-6 6v8h2v-8z'/%3E%3C/svg%3E");
}

/* 橙色人员图标（等待） */
.orange-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='%23ed8936' d='M12 4c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm-6 8c0-2.2 1.8-4 4-4h4c2.2 0 4 1.8 4 4v8h2v-8c0-3.3-2.7-6-6-6h-4c-3.3 0-6 2.7-6 6v8h2v-8z'/%3E%3C/svg%3E");
}

/* 比例条 */
.ratio-bar {
    width: 100%;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.ratio-fill {
    height: 100%;
    background: linear-gradient(90deg, #48bb78 0%, #ed8936 100%);
    border-radius: 10px;
}

.ratio-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
}

// 左边2的样式
/* 主容器 - 固定尺寸 */
.realtime-handling-container {
    width: 400px;
    height: 580px;
    //   background-color: #0a1e4c;
    padding: 20px 15px;
    box-sizing: border-box;
    border-radius: 4px;
}

/* 标题区域 */
.handling-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(60, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-mark {
    width: 12px;
    height: 12px;
    background-color: #3cb4ff;
    transform: rotate(45deg);
    margin-right: 8px;
}

.handling-title {
    color: #3cb4ff;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

/* 数据列表 */
.data-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100% - 50px);
    overflow-y: auto;
    padding-right: 5px;
}

/* 自定义滚动条 */
.data-list::-webkit-scrollbar {
    width: 6px;
}

.data-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.data-list::-webkit-scrollbar-thumb {
    background: rgba(66, 153, 225, 0.3);
    border-radius: 3px;
}

.data-list::-webkit-scrollbar-thumb:hover {
    background: rgba(66, 153, 225, 0.5);
}

/* 自定义滚动条 */
.data-list::-webkit-scrollbar {
    width: 6px;
}

.data-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.data-list::-webkit-scrollbar-thumb {
    background: rgba(66, 153, 225, 0.3);
    border-radius: 3px;
}

.data-list::-webkit-scrollbar-thumb:hover {
    background: rgba(66, 153, 225, 0.5);
}

/* 数据项 */
.data-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: rgba(30, 85, 155, 0.3);
    border-radius: 4px;
}

/* 图标样式 */
.item-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 15px;
    opacity: 0.9;
}

/* 各类图标（使用SVG实现） */
.ticket-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3v-1zm6-7c0 .55-.45 1-1 1h-2v2h2c.55 0 1 .45 1 1s-.45 1-1 1h-2c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h2c.55 0 1 .45 1 1z'/%3E%3C/svg%3E");
}

.accept-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

.processing-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M18.36 5.64c-.78-.78-2.05-.78-2.83 0l-2.83 2.83L15.17 11H13v-2c0-.55-.45-1-1-1h-2v2c0 .55.45 1 1 1h1.17l-1.5 1.5L11 14.17l4.83 4.83c.78.78 2.05.78 2.83 0s.78-2.05 0-2.83L18.36 5.64zM4 13c0 .55.45 1 1 1h6v6c0 .55.45 1 1 1s1-.45 1-1v-6h6c.55 0 1-.45 1-1s-.45-1-1-1h-6V6c0-.55-.45-1-1-1s-1 .45-1 1v6H5c-.55 0-1 .45-1 1z'/%3E%3C/svg%3E");
}

.wait-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.company-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm2-3H2v2h18V5z'/%3E%3C/svg%3E");
}

.license-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
}

.insurance-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.traffic-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5H6.5c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5S16.67 13 17.5 13s1.5.67 1.5 1.5S18.33 16 17.5 16zm-11-8c-.83 0-1.5-.67-1.5-1.5S5.67 5 6.5 5s1.5.67 1.5 1.5S7.33 8 6.5 8zm11 0c-.83 0-1.5-.67-1.5-1.5S16.67 5 17.5 5s1.5.67 1.5 1.5S18.33 8 17.5 8z'/%3E%3C/svg%3E");
}

.property-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

.card-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233cb4ff' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-2 14H6c-1.1 0-2-.9-2-2V8h16v8c0 1.1-.9 2-2 2zm-6-4h-2v-2h2v2zm0-3h-2V9h2v2zm0 6h-2v-2h2v2zm3-3h-2v-2h2v2zm0 3h-2v-2h2v2zm3-3h-2v-2h2v2zm0 3h-2v-2h2v2z'/%3E%3C/svg%3E");
}

/* 文字标签 */
.item-label {
    flex: 1;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

/* 数值区域 */
.item-value {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

/* 负数样式 */
.negative {
    color: #ff6b6b;
}

/* 单位 */
.item-unit {
    margin-left: 5px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: normal;
}

// 右边1的样式
/* 主容器 - 固定尺寸 */
.monthly-total-container {
    width: 400px;
    height: 190px;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* 标题区域 */
.monthly-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(60, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-sign {
    width: 12px;
    height: 12px;
    background-color: #3cb4ff;
    transform: rotate(45deg);
    margin-right: 8px;
}

.monthly-title {
    color: #3cb4ff;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

/* 大数字展示区 */
.big-number-section {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 8px;
    height: 45px;
    margin-left: 50px;
}

/* 数字卡片 */
.number-card {
    width: 36px;
    height: 45px;
    background-color: #165dff;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* 逗号分隔符 */
.comma {
    color: #3cb4ff;
    font-size: 24px;
    font-weight: bold;
    line-height: 45px;
}

/* 单位文本 */
.unit-text {
    color: #3cb4ff;
    font-size: 16px;
    margin-left: 5px;
    line-height: 45px;
}

/* 明细数据区 */
.detail-data {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* 明细项 */
.detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 明细数值 */
.detail-value {
    color: #3cb4ff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* 明细标签 */
.detail-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-align: center;
    width: 110px;
}

// 右边2的样式
/* 主容器 - 固定尺寸 */
.annual-total-container {
    width: 400px;
    height: 190px;
    //   background-color: #0a1e4c;
    padding: 25px 20px;
    box-sizing: border-box;
}

/* 标题区域 */
.annual-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(68, 150, 255, 0.2);
}

/* 菱形图标 */
.diamond-indicator {
    width: 12px;
    height: 12px;
    background-color: #4496ff;
    transform: rotate(45deg);
    margin-right: 8px;
}

.annual-title {
    color: #4496ff;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

/* 大数字展示区 */
.large-number-area {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 15px;
    height: 45px;
    margin-left: 20px;
}

/* 数字卡片 */
.number-card {
    width: 34px;
    height: 45px;
    background-color: #1a5fff;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

/* 分隔符（逗号） */
.separator {
    color: #4496ff;
    font-size: 24px;
    font-weight: bold;
    line-height: 45px;
}

/* 单位文本 */
.count-unit {
    color: #4496ff;
    font-size: 16px;
    margin-left: 4px;
}

/* 明细数据区 */
.stat-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* 统计项 */
.stat-item1 {
    // display: flex;
    // flex-direction: column;
    align-items: center;
    width: 120px;
}

/* 统计数字 */
.stat-figure {
    color: #4496ff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 3px;
    text-align: center;
}

/* 统计标签 */
.stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-align: center;
}

// 中间1的样式
/* 主容器 - 固定尺寸 */
.workload-top-container {
    width: 960px;
    height: 590px;
    //   background-color: #0a1e4c;
    padding: 20px 25px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 标题区域 */
.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(60, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-tag {
    width: 13px;
    height: 13px;
    background-color: #3cb4ff;
    transform: rotate(45deg);
    margin-right: 10px;
}

.main-title {
    color: #3cb4ff;
    font-size: 18px;
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* 累计办件总量区域 */
.total-count-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.total-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
}

/* 累计数字组合 */
.total-number-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 累计数字卡片 */
.total-number-card {
    width: 28px;
    height: 36px;
    background-color: #165dff;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

/* 数字分隔符 */
.total-separator {
    color: #3cb4ff;
    font-size: 18px;
    font-weight: bold;
}

.total-unit {
    color: #3cb4ff;
    font-size: 14px;
}

/* 排行区域 */
.ranking-section {
    margin-bottom: 20px;
}

/* 区域标题 */
.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #3cb4ff;
    font-size: 15px;
    font-weight: 500;
}

.title-dot {
    width: 8px;
    height: 8px;
    background-color: #3cb4ff;
    border-radius: 50%;
    margin-right: 8px;
}

/* 表格样式 */
.ranking-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 表头 */
.table-header {
    background-color: rgba(60, 180, 255, 0.15);
}

.ranking-table th {
    color: #66b2ff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 10px;
    text-align: left;
    border: 1px solid rgba(60, 180, 255, 0.15);
}

/* 表格行 */
.table-row {
    background-color: rgba(60, 180, 255, 0.03);
}

.table-row:nth-child(even) {
    background-color: rgba(60, 180, 255, 0.05);
}

.ranking-table td {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    padding: 12px 10px;
    border: 1px solid rgba(60, 180, 255, 0.1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 列宽分配 */
.ranking-table th:nth-child(1),
.ranking-table td:nth-child(1) {
    width: 80px;
}

.ranking-table th:nth-child(2),
.ranking-table td:nth-child(2) {
    width: 400px;
}

.ranking-table th:nth-child(3),
.ranking-table td:nth-child(3) {
    width: 200px;
}

.ranking-table th:nth-child(4),
.ranking-table td:nth-child(4) {
    width: 100px;
    text-align: right;
}

/* 表格容器 - 添加滚动功能 */
.table-container {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid rgba(60, 180, 255, 0.1);
    border-radius: 4px;
    padding-right: 5px;
}

/* 表格容器滚动条样式 */
.table-container::-webkit-scrollbar {
    width: 6px;
}

.table-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(66, 153, 225, 0.3);
    border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(66, 153, 225, 0.5);
}

// 中间2的样式
/* 主容器 - 固定尺寸 */
.trend-container {
    width: 960px;
    height: 300px;
    //   background-color: #0a1e4c;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* 标题区域 */
.trend-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(60, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-marker {
    width: 12px;
    height: 12px;
    background-color: #3cb4ff;
    transform: rotate(45deg);
    margin-right: 8px;
}

.trend-title {
    color: #3cb4ff;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

/* 图表容器 */
.chart-container {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

//右边3的样式
/* 主容器 - 固定尺寸 */
.satisfaction-total-container {
    width: 400px;
    height: 500px;
    // background-color: #0a1e4c;
    padding: 25px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 标题区域 */
.satisfaction-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(60, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-sign {
    width: 12px;
    height: 12px;
    background-color: #3cb4ff;
    transform: rotate(45deg);
    margin-right: 8px;
}

.satisfaction-title {
    color: #3cb4ff;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

/* 仪表图容器 */
.gauge-chart-container {
    flex: 1;
    min-height: 100px;
    position: relative;
}

/* 满意度分布列表 */
.satisfaction-list {
    margin-top:-60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 单个满意度项 */
.satisfaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 24px;
}

/* 颜色标识 */
.item-color {
    width: 14px;
    height: 14px;
    border-radius: 2px;
}

/* 名称 */
.item-name {
    width: 90px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* 进度条容器 */
.item-bar {
    flex: 1;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

/* 进度条填充 */
.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* 百分比 */
.item-percentage {
    width: 50px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-align: right;
}

/* 容器样式 */
.gauge-container {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 300px;
}

/* 图表容器 */
.chart-wrapper {
  width: 100%;
  height: 80%;
}
</style>
